<template>
  <div class="layout-pool">
    <el-row class="layout-search">
      <el-col :span="5">
        <FileInput @change="(files) => drawMaterial(files)">
          <el-tooltip
            placement="top"
            :hide-after="0"
            :content="$t('message.searchMat')"
          >
            <el-button type="primary">
              <IconUpload />
            </el-button>
          </el-tooltip>
        </FileInput>
      </el-col>
      <el-col :span="19">
        <el-input
          :prefix-icon="Search"
          :placeholder="$t('message.searchMat')"
        ></el-input>
      </el-col>
    </el-row>
    <div class="layout-content">
      <!-- <el-tabs v-model="activeMaterial" class="layout-tabs material-tab">
        <el-tab-pane :label="$t('message.recommendMat')" name="data">
          <LinePool @select="(line) => drawLine(line)" />
          <PathPool @select="(path) => drawPath(path)" />
        </el-tab-pane>
        <el-tab-pane :label="$t('message.myBookmarksMat')" name="self">{{
          $t("message.myBookmarksMat")
        }}</el-tab-pane>
        <el-tab-pane :label="$t('message.myPurchasesMat')" name="team">{{
          $t("message.myPurchasesMat")
        }}</el-tab-pane>
      </el-tabs> -->
      <LinePool @select="(line) => drawLine(line)" />
      <PathPool @select="(path) => drawPath(path)" />
    </div>
  </div>
</template>

<script setup>
import { vue} from '@core';
const { ref, computed } = vue;
import { Search } from "@element-plus/icons-vue";
import { nanoid } from "nanoid";

import {  ElementNames } from "@views/fabric/types/elements";
import { Object as FabricObject} from "fabric";
import { loadSVGFromString } from '@views/fabric/extension/parser/loadSVGFromString'
import { getImageDataURL, getImageText } from "@views/fabric/utils/image";
import { useTemplatesStore } from "@views/fabric/store";
import useCanvas from "@views/fabric/Canvas/useCanvas";
import PathPool from "./MaterialComponents/PathPool.vue";
import LinePool from "./MaterialComponents/LinePool.vue";
import useHandleCreate from "@views/fabric/hooks/useHandleCreate";

const { createLineElement, createPathElement } = useHandleCreate();
const activeMaterial = ref("data");

const drawLine = (line) => {
  const strokeDashArray =
    line.style === "dashed" ? [6, 6] : undefined;
  createLineElement(line.data, line.points[0], line.points[1], strokeDashArray);
};

const drawPath = (shape) => {
  createPathElement(shape.path);
};

const svgCallback = (element, fabricObject) => {
  const [canvas] = useCanvas();
  canvas.add(fabricObject);
};

const drawMaterial = async (files) => {
  const materialFile = files[0];
  const [canvas] = useCanvas();
  if (!materialFile) return;
  const dataText = await getImageText(materialFile);
  await loadSVGFromString(dataText, svgCallback);
  canvas.renderAll();
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs__item) {
  padding: 0;
}
.layout-search {
  margin: 0 auto;
  width: 80%;
  padding: 10px;
  height:44px;
}
.layout-upload {
  justify-content: center;
}
.layout-content{
  height:calc(100% - 44px);
  overflow:auto
}
.layout-tabs {
  width: 90%;
  margin: 0 auto;
  height:100%;
  position:relative;
  :deep(.el-tabs__content){
    height:calc(100% - 55px);
    overflow:hidden;
    .el-tab-pane{
      height:100%;
      position:relative;
      overflow:auto;
    }
  }
}
.layout-templates {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  .thumbnail {
    display: flex;
    width: 124px;
    margin: 2px;
  }
  .thumbnail img {
    outline: 1px solid $borderColor;
    margin: 0 5px;
    cursor: pointer;
    &:hover {
      outline-color: $themeColor;
    }
  }
}
</style>
<style>
.material-tab .el-tabs__nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
}
.material-tab .el-tabs__content {
  height: 100vh;
  overflow-y: scroll;
}
</style>